import React from 'react';
class List extends React.Component {
    state = {

    }
    render() {
        let { todoList, tab, check, del } = this.props;
        let todoList1 = []
        let todoList0 = []
        for (let i = 0; i < todoList.length; i++) {
            if (todoList[i].state) {
                todoList1.push(todoList[i])
            } else {
                todoList0.push(todoList[i])
            }
        }
        return (
            <div className='todoList'>
                <ul>
                    {tab === 0 && todoList.map((item, index) => {
                        return <li key={index}>
                            <p>{item.state ? <span>已完成</span> : <input type="checkbox" onChange={e => {
                                check(e.target.parentNode.parentNode.childNodes, index)
                                
                            }} />}</p><p className='lips'>{item.name}</p>
                            <div onClick={e => {
                                del(e.target.parentNode.childNodes[1])
                            }}>删除</div>
                        </li>
                    })}
                    {tab === 1 && todoList1.map((item, index) => {
                        return <li key={index}>
                            <p><span>已完成</span></p>
                            <p className='lips'>{item.name}</p>
                            <div onClick={e => {
                                del(e.target.parentNode.childNodes[1])
                            }}>删除</div>
                        </li>
                    })}
                    {tab === 2 && todoList0.map((item, index) => {
                        return <li key={index}>
                            <p><input type="checkbox" onChange={e => {
                                check(e.target.parentNode.parentNode.childNodes, index)
                            }} /></p>
                            <p className='lips'>{item.name}</p>
                            <div onClick={e => {
                                del(e.target.parentNode.childNodes[1])
                            }}>删除</div>
                        </li>
                    })}
                </ul>
            </div>
        )
    }
}
export default List